
<script src="resources/js/datagrid-scrollview.js" type="text/javascript"> </script>
<script src="resources/js/jquery.maskMoney.js" type="text/javascript"> </script>

<script>
    $(document).ready(function () {
   	 	$("#whiteCost").maskMoney({symbol:'$'});
   	 	$("#colorCost").maskMoney({symbol:'$'});
   		$("#price").maskMoney({symbol:'$'});   	
   		
   	 $('#searchProductStyle').keypress(function (e) {
   		 var key = e.which;
   		 if(key == 13) { // the enter key code
   			searchProduct();
   		  }
   		});
   	  
   	 $('#searchDesc').keypress(function (e) {
   		 var key = e.which;
   		 if(key == 13) { // the enter key code
   			searchProduct();
   		  }
   		});
   	 
   	 
   	});
    

</script>

    
<table id="product_list" ></table>

<div id="product_toolbar">
<table cellpadding="5" cellspacing="0" style="width:100%;">  
       <tr>  
           <td>  
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newProduct()">New</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editProduct()">Edit</a>
							
		</td>
		
		<td class="toolbarlabel_right"> <!-- tool bar label align to the right -->
			Style: <input class="easyui-validatebox" type="text" name="searchProductStyle" id="searchProductStyle" data-options="required:false" />
			Description: <input class="easyui-validatebox" type="text" name="searchDesc" id="searchDesc" data-options="required:false" />
        <a href="#" id="searchBtn" name="searchBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true"  onclick="searchProduct()">Search</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-reset" plain="true" onclick="reset()">Reset</a>
	        
	    </td>

	 </tr>
</table>	
</div>


<div id="productEditor" class="easyui-dialog" style="width:500px;height:490px; padding:0px 20px 0px 20px" closed="true" buttons="#dlg-buttons">
	<div class="ftitle">Product Editor</div>
	<form id="productForm" name="productForm" method="post" novalidate>
		<input type="hidden" id="prodId" >
		<input type="hidden" id="fmurl" >

		<div class="fitem">
			<label>Style #:</label>			
			<input id="styleNo" name="styleNo" type="text" style="width: 168px; padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>
		<div class="fitem">
			<label>Brand:</label>			
			<input id="brand" name="brand" type="text" style="width: 168px;padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>
		
		<div class="fitem">
			<label>Description:</label>			
			<input id="description" name="description" type="text" style="width: 336px;padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>

		<div class="fitem">
			<label>Category:</label>			
			<select id="category" name="category" class="easyui-combobox" style="width:168px;" >
													<option value="TEE">T-Shirt</option>  
											        <option value="SWEAT">Sweat/Sports</option>
											        <option value="JACKET">Jacket</option>
											        <option value="CAP">Cap</option>
											        <option value="TANK">Tank</option>
											        <option value="POLO">Polo</option> 
											        <option value="OTHER">OTHER</option>
			</select>
		</div>

		<div class="fitem">
			<label>Size:</label>			
			<input id="size" name="size" type="text" style="width: 336px;padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>
		
		<div class="fitem">
			<label>Color:</label>			
			<input id="color" name="color" type="text" style="width: 336px; padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>
		
		<div class="fitem">
			<label>Cost: $</label>			
			<input id="cost" name="cost" type="text" style="width: 336px; padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>
	
		<div class="fitem">
			<label>Catalog Pg#:</label>			
			<input id="pageNum" name="pageNum" type="text" style="width: 336px; padding-left: 3px;" class="easyui-validatebox"  data-options="required:true" />	
		</div>


		
	</form>
</div>

<div id="dlg-buttons" style="padding:10px 10px 10px 0px">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveProduct()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#productEditor').dialog('close')">Cancel</a>
</div>




<script type="text/javascript">

	 	
	
	function searchProduct(){
		$('#product_list').datagrid('load',{
			style: $('#searchProductStyle').val(),
			description: $('#searchDesc').val() 
		});

	} 
	
	function reset(){
		$('#searchProductStyle').val('');
		$('#searchDesc').val('');
		
		$('#product_list').datagrid('load',{
			style: $('#searchProductStyle').val(),
			description: $('#searchDesc').val() 
		});

	} 
	
	
	function editProduct(){
		
	}
	
	$('#product_list').datagrid({ 
		url: 'searchProduct.json',
		method: 'GET',
		view: scrollview,
	    rownumbers: false,
	    fitColumns: true,
	    nowrap: false,
	    remoteSort: false,
	    height:610,
	    striped: true,
	    singleSelect: true,
	    autoRowHeight:false,
	    pageSize:50,
	    pagination: false,
	    toolbar: '#product_toolbar',
	    sortName: 'brand',
		columns:[[  
		        {title:'Id',field:'prodId',align:'left',width:50, sortable:true}, 
		        {title:'Style#',field:'styleNo',align:'left', width:100, sortable:true},  
		        {title:'Brand',field:'brand',align:'center', width:150, sortable:true},
		        {title:'Description',field:'description',align:'center',width:400},
		        {title:'Category',field:'category',align:'center',width:100, sortable:true},
		        {title:'Size',field:'size',align:'center',width:150},
		        {title:'Color',field:'color',align:'center',width:150},
		        {title:'Cost',field:'cost',align:'center',width:100,sortable:true},
		        {title:'Page #',field:'pageNum',align:'center',width:100}
		    ]],
	    onDblClickRow: function(rowIndex, rowData){
			var row = $('#product_list').datagrid('getSelected');
			  // alert(row.prodId + "|" + row.styleNo);
			if (row){
				$('#prodId').val(row.prodId);
				$('#productEditor').dialog('open').dialog('setTitle','Edit Product');
				$('#productForm').form('load',row);				
				$('#fmurl').val('updateProduct.json?prodId='+row.prodId);
			}else{
				$.messager.alert('Alert','Please select the Product to be edited.');
		    	return false;
			}
		}
	
	});	
	

	function saveProduct(){  
		// alert($('#fmurl').val());
	    $('#productForm').form('submit',{  
	    	url: $('#fmurl').val(),
	        onSubmit: function(){  
	            return $(this).form('validate');  		            
	        },  
	        success: function(result){
	        	// alert(result);
	            var result = eval('('+result+')');  
	            // alert(result);
	            if (result.success){  
	                $('#productEditor').dialog('close');      // close the dialog  
	                $('#product_list').datagrid('reload');
	                $.messager.show({  
	                    title: 'Result',  
	                    msg: 'Product has been saved successfully.'  
	                });  
	            } else {
	            	$.messager.show({  
	                    title: 'Error',
	                    width: 400,
                        height: 200,
                        timeout: 15000,
	                    msg: result.msg  
	                }); 
	            }  
	        }  
	    });  
	}  
	
	function newProduct(){
		$('#productEditor').dialog('open').dialog('setTitle','New Product');
		$('#productForm').form('clear');
		$('#fmurl').val('createProduct.json');		
	}
	
	
</script>